<template>
  <div class="details">
    <div class="details-content">
      <div class="details-content-right">
        <el-form
          :inline="true"
          :model="headerForm"
        >
          <el-form-item label="起止时间">
            <el-date-picker
              v-model="headerForm.date"
              type="daterange"
              clearable
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD 00:00:00"
              style="width: 239px"
            />
          </el-form-item>
          <el-form-item label="用户名">
            <el-input
              v-model="headerForm.userName"
              placeholder="请输入"
              clearable
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="支付方式">
            <el-select
              v-model="headerForm.payType"
              placeholder="全部"
              style="width: 240px"
            >
              <el-option
                v-for="item in PAY_TYPE"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="销售类型">
            <el-select
              v-model="headerForm.tradeType"
              placeholder="全部"
              style="width: 240px"
            >
              <el-option
                v-for="item in TRADE_TYPE"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="reGetList"
            >
              查询
            </el-button>
            <!-- <el-button @click="onExport"> 导出 </el-button> -->
          </el-form-item>
        </el-form>
        <el-table
          :data="tableData.list"
          stripe
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="编号"
            width="80"
          />
          <el-table-column
            prop="userName"
            label="用户名"
          />
          <el-table-column
            prop="amount"
            label="金额(元)"
          />
          <el-table-column
            prop="payType"
            label="支付方式"
          >
            <template #default="{ row }">
              {{ getPayTypeLabel(row.payType) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="tradeType"
            label="销售类型"
          >
            <template #default="{ row }">
              {{ getTradTypeLabel(row.tradeType) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
          />
          <el-table-column
            prop="createUser"
            label="操作人"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
          />
        </el-table>
        <Pagination
          :pageProps="pageProps"
          layout="prev, pager, next"
          @current-change="getList"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * 交易记录
 */
import { reactive, ref } from "vue";
import { ElMessage, ElLoading } from "element-plus";
import { TRADE_TYPE, PAY_TYPE } from "@/utils/config";
import { getRecordList, exportData } from "@/api/settle";
import Pagination from "@/components/Pagination/Index.vue";

const headerForm = reactive({
  houseNum: "",
  userName: "",
  payType: "",
  tradeType: "",
  date: [],
  startDate: "",
  endDate: "",
});

const pageProps = ref({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

const tableData = reactive({
  list: [] as any,
});

const getList = () => {
  if (headerForm.date?.length) {
    headerForm.startDate = headerForm.date[0];
    headerForm.endDate = headerForm.date[1];
  } else {
    headerForm.startDate = "";
    headerForm.endDate = "";
  }
  getRecordList({
    pageNum: pageProps.value.pageNum,
    pageSize: pageProps.value.pageSize,
    ...headerForm,
  })
    .then((res) => {
      tableData.list = res.data.records;
      // TODO use real api total res total
      pageProps.value.total = res.data.total;
    })
    .catch((err: any) => {
      console.error("err", err.msg);
    });
};

const reGetList = () => {
  pageProps.value.pageNum = 1;
  getList();
};

const getTradTypeLabel = (value: string) => {
  return TRADE_TYPE.find((item) => item.value == value)?.label || value;
};

const getPayTypeLabel = (value: string) => {
  return PAY_TYPE.find((item) => item.value == value)?.label || value;
};

// 导出
const onExport = () => {
  const loading2 = ElLoading.service({
    lock: true,
    text: "导出中，请稍等...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  exportData({
    pageNum: pageProps.value.pageNum,
    pageSize: pageProps.value.pageSize,
    ...headerForm,
  })
    .then((res: any) => {
      const link = document.createElement("a");
      let blob = new Blob([res.data], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
      });
      link.style.display = "none";
      link.href = URL.createObjectURL(blob);
      let fileName = res.headers["content-disposition"]
        .split(";")[1]
        .split("filename=")[1];
      link.download = decodeURIComponent(fileName);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      loading2.close();
    })
    .catch(() => {
      loading2.close();
      ElMessage({
        message: "导出失败",
        type: "error",
      });
    });
};

getList();
</script>

<style lang="scss" scoped>
.details {
  padding: 20px;
  background: #f2fbf9;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  height: 40px;

  .details-header-title {
    font-weight: bold;
    color: #333333;
    font-size: 16px;
    display: flex;
    align-items: center;

    .el-icon {
      margin-right: 4px;
    }
  }
}

.details-content {
  position: relative;
  min-height: calc(100vh - 130px);
  padding: 16px;
  background: #ffffff;
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.06);
  border-radius: 8px;

  .details-content-right {
    .el-form-item {
      margin-right: 20px;
    }
  }
}
</style>
